<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-ui-contents-list">
  <div class="ddp-wrap-option">
    <!-- option -->
    <div class="ddp-ui-option ddp-clear">
      <!-- edit -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.metadata.md.ui.data.type' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <!-- selectbox -->
          <!-- add ddp-selected when clicked-->
          <component-select
            [defaultIndex]="typeDefaultIndex"
            [array]="sourceTypeList"
            [viewKey]="'label'"
            (onSelected)="onSourceTypeListChange($event)">
          </component-select>
          <!-- //selectbox -->
        </div>
        <!-- //edit option -->
      </div>
      <!-- //edit -->
      <!-- edit -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.metadata.md.ui.tags.type' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <!-- selectbox -->
          <!-- 선택시 : ddp-selected 추가 -->
          <component-select
            [defaultIndex]="tagDefaultIndex"
            [array]="tagsList"
            [viewKey]="'name'"
            (onSelected)="onTagsListChange($event)">
          </component-select>
          <!-- //selectbox -->
        </div>
        <!-- //edit option -->
      </div>
      <!-- //edit -->
      <div class="ddp-ui-rightoption">
        <a href="javascript:" class="ddp-link-reset" (click)="refreshFilter() "><em class="ddp-btn-reset3"></em>{{'msg.mem.btn.refresh' | translate}}</a>
      </div>
    </div>
    <!-- //option -->
    <!-- option -->
    <div class="ddp-ui-option ddp-optiontype ddp-clear">
      <!-- search -->
      <div class="ddp-form-search ddp-fleft">
        <em class="ddp-icon-search"></em>
        <component-input
          [autoFocus]="false"
          [compType]="'search'"
          [value]="listSearchText"
          [placeHolder]="'msg.metadata.md.ui.search.ph' | translate"
          (changeValue)="listSearchText = $event; onSearchText();">
        </component-input>
      </div>
      <!-- //search -->
      <!-- right -->
      <div class="ddp-ui-rightoption">
        <span *ngIf="getTotalContentsCount > 1" class="ddp-data-total" [innerHTML]="'msg.metadata.ui.lists' | translate : { value : getTotalContentsCount }"></span>
        <span *ngIf="getTotalContentsCount <= 1" class="ddp-data-total" [innerHTML]="'msg.metadata.ui.list' | translate : { value : getTotalContentsCount }"></span>
        <component-sorting [sortList]="sortList"
                           [selectedSort]="selectedSort"
                           (changedSort)="changeSort($event)">
        </component-sorting>
        <a href="javascript:" class="ddp-btn-link" (click)="createNewMetadata()"><em class="ddp-icon-link-add"></em>{{'msg.metadata.md.btn.create.md' | translate}}</a>
      </div>
      <!-- //right -->
    </div>
    <!-- //option -->
  </div>
  <table class="ddp-table-form ddp-table-line" *ngIf="metadatas && metadatas.length > 0">
    <colgroup>
      <col width="120px">
      <col width="*">
      <col width="150px">
      <col width="130px">
      <col width="250px">
    </colgroup>
    <thead>
    <tr>
      <th>
        {{'msg.metadata.md.ui.data.type' | translate}}
      </th>
      <th>
        {{'msg.comm.ui.name' | translate}}
      </th>
      <th>
        {{'msg.metadata.md.ui.tags' | translate}}
      </th>
      <th>
        {{'msg.metadata.md.ui.data.popularity' | translate}}
        <div class="ddp-wrap-hover-info">
          <em class="ddp-icon-info3"></em>
          <!-- popup -->
          <div class="ddp-box-layout4 ddp-popularity">
            <div class="ddp-data-title">
              {{'msg.metadata.md.ui.tooltip.title' | translate}}
            </div>
            <div class="ddp-data-det">
              {{'msg.metadata.md.ui.tooltip.description' | translate}}
              <ul>
                <li>• {{'msg.metadata.md.ui.tooltip.point.1' | translate}}</li>
                <li>• {{'msg.metadata.md.ui.tooltip.point.2' | translate}}</li>
                <li>• {{'msg.metadata.md.ui.tooltip.point.3' | translate}}</li>
              </ul>
            </div>
          </div>
          <!-- //popup -->
        </div>
      </th>
      <th>
        {{'msg.comm.th.updated' | translate}}
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let metadata of metadatas" (click)="onClickMetadataDetail(metadata)">
      <td>
        <span class="ddp-box-tag-value" [ngClass]="getMetadataTypeIcon(metadata)">
          {{getMetadataType(metadata)}}
        </span>
      </td>
      <td>
        <div class="ddp-txt-long" title="{{getTooltipValue(metadata)}}">
          <span [innerHTML]="getMetadataName(metadata.name)"></span>
          <span class="ddp-txt-colortype" *ngIf="isEnableDescription(metadata)" [innerHTML]="getMetadataDescription(metadata.description)"></span>
        </div>
      </td>
      <td>
        <div class="ddp-wrap-tags" *ngIf="isEnableTag(metadata)">
          <span class="ddp-tags"># {{metadata.tags[0].name}}</span>
          <span class="ddp-tag-more" *ngIf="isExistMoreTags(metadata)">+ {{metadata.tags.length - 1}}</span>
        </div>
      </td>
      <td>
        <div class="ddp-ui-popularity">
          <em class="ddp-icon-popularity"></em>
          <div class="ddp-bar">
            <span [style.width]="metadata.popularity + '%'" style="margin-bottom:10px;"></span>
          </div>
        </div>
      </td>
      <td>
        {{ metadata.modifiedTime | mdate:'YYYY-MM-DD HH:mm' }} by {{ metadata.modifiedBy.fullName }}
        <div class="ddp-btn-control" *ngIf="METADATA_SOURCE_TYPE.ENGINE !== metadata.sourceType">
          <em class="ddp-icon-control-cut" (click)="confirmDelete($event,metadata)"></em>
        </div>
      </td>
    </tr>
    </tbody>
  </table>

  <div class="ddp-data-source-none" *ngIf="metadatas && metadatas.length === 0; else yesMd">
    {{'msg.metadata.ui.no.metadata' | translate}}
  </div>
  <!-- //no data -->

  <ng-template #yesMd>
    <component-pagination [info]="pageResult" (changePageData)="changePage($event)"></component-pagination>
  </ng-template>
</div>

<create-metadata-main (createdComplete)="createdMetadata($event)"></create-metadata-main>

<app-select-catalog></app-select-catalog>
<app-delete-modal (deleteConfirm)="deleteMetadata()"></app-delete-modal>
